<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue学习</title>
		
	</head>
	<body>
		<div id="app">
			<blog-post @chgh-tile="chghTileP" :ptitle="title" :h-tile="hTile"></blog-post>
		</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('blog-post', {
				data:function(){
					return{
						title: '子组件的title'
					}
				},
				props: ['ptitle','hTile'],
				template: `
				    <div class="blog-post">
					   <h3>YAEA{{title}}{{ptitle}}{{hTile}}</h3>
					   <button @click="$emit('chgh-tile')">修改</button>
					</div>
				`
			})
			new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue',
					title: 'app的title',
					hTile: '该该嘎嘎嘎'
				},
				methods:{
					chghTileP: function(){
						console.log("chghTileP");
						this.hTile="我被子组件修改"
					}
				}
			})
		</script>

	</body>
</html>
